</<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="format-detection" content="telephone=yes"/>
    <meta name="msapplication-tap-highlight" content="no" />
    <title>Document</title>
</head>
<style>
    *{
        padding:0;
        margin:0;
    }
    header{
        padding:30px;
        background-color: rgba(148, 17, 255, 0.58);
        color:white;
        display:flex;
        justify-content:space-between;
        border:1px solid white;
    }
    #menu{
        position:relative;
        top:10px;
    }
    #menu li{
        display:inline-block;
        font-size:20px;
    }
    #container ul{
        display:flex;
        width:100%;
        justify-content:space-around;
        flex-wrap:wrap;
        align-items:center;
    }
    #container{
        width:90%;
        margin:0 auto;
    }

    #container li{
        width:40%;
        margin-top:20px;
    }
    li{
        list-style-type:none;
        box-shadow: 6px 6px 4px #888888;
    }
    img{
        width:100%;
    }
    #container h1{
        background-color: #fabc52;
        color:white;
        margin:20px auto;
        text-align:center;
        width:80%;
    }
    .imginfo{
        padding-top: 20px;
        padding-bottom: 20px;
        background-color: #fadda8;
        width:100%;
    }
    .currentNum{
        text-align: center;
    }
    button:hover{
        transform: scale(1.3);
    }

    /*//响应式布局*/
    @media screen and (min-width:1024px) and (max-width:1366px){
        #container li{
            width:30%;
        }
    }
    @media screen and (min-width:768px) and (max-width:1024px){
        #container li{
            width:26%;
        }
    }
    @media screen and (min-width:410px) and (max-width:768px){
        #container li{
            width:40%;
        }
    }
    @media screen and (max-width:410px){
        #container{
            width:100%;
        }
        #container li{
            width:80%;
        }
    }
    @media screen and (max-width:650px){
        header{
            display:block;
        }
    }
    @media screen and (max-width:500px){
        header h1{
            font-size:20px;
            text-align:center;
        }
    }


</style>
<body>
<header>
    <h1>欢迎进入摄影图片投票系统</h1>
    <ul id="menu">
        <li>登录</li>
        <li>注册</li>
    </ul>
</header>
<?php
include_once "conn.php";
$sql="select * from imginfo order by id desc";
$result = mysqli_query($conn,$sql);
?>
<div id="container">
    <h1>参赛图片</h1>
    <ul>
        <?php
        while($info = mysqli_fetch_array($result))
        {
        ?>
        <li><img src="img/<?php echo $info['pic']?>">
            <div class="imginfo">
                <div class="currentNum"><h3>当前票数:<span><?php echo $info['currentNum']?></span></h3></div>
                <p>图片名称：<span><?php echo $info['picname']?></span></p>
                <p>作者：<span><?php echo $info['author']?></span></p>
                <p>图片风格：<span><?php echo $info['type']?></span></p>
                <p>图片描述：<span><?php echo $info['description']?></span></p><br>
                <div class="vote" style="text-align: center;"><a href="vote.php?id=<?php echo $info['id']?>"><button style="box-shadow: 4px 4px 5px #888888;"><img style="width: 15%" src="img/vote.png" >&nbsp;我要投票</button></a></div
            </div>
        </li>
      <?php
        }
        ?>
    </ul>
    <h1>提交</h1>
</div>
</body>
</html>
<?php
